<template>
  <div class="index-container">
    <el-form :inline="true" >
      <el-form-item label="商品名称">
        <el-input v-model="queryForm.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="店铺">
        <el-select v-model="queryForm.shopId" placeholder="请选择">
          <el-option
            v-for="item in shopStatusData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="校区">
        <el-select v-model="queryForm.schoolId" placeholder="请选择">
          <el-option
            v-for="item in schoolData"
            :disabled="item.status != 2"
            :key="item.schoolId"
            :label="item.schoolName"
            :value="item.schoolId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-search"
          type="primary" @click="initList">
          查询
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="tableSort"
      :data="list"
    >
      <el-table-column prop="imgUrl" label="商店图片">
        <template #default="{ row }">
           <viewer>
            <img :src="row.imgUrl" style="width:60px;"></img>
          </viewer>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="商店名" prop="name"/>
      <el-table-column show-overflow-tooltip label="商店地址" prop="location"/>
      <el-table-column show-overflow-tooltip label="是否营业" prop="isOpen">
        <template #default="{ row }">
          <el-tag size="small">{{row.sex === 1 ? '是':'否'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="用户名称" prop="manageId"/>
      <el-table-column show-overflow-tooltip label="所属校区" prop="schoolId"/>
      <el-table-column show-overflow-tooltip label="商店状态" prop="status" :formatter="formatstatus" />
      <el-table-column show-overflow-tooltip label="是否营业" prop="isOpen" :formatter="formatIsOpen"/>
      <el-table-column show-overflow-tooltip label="商店自述" prop="selfExpression" />
      <el-table-column show-overflow-tooltip label="商店当前状态原因" prop="reason" />
      <el-table-column label="营业时间" prop="openTime" :formatter="formatTime"/>
      <el-table-column label="操作" width="220px">
        <template #default="{ row }">
            <el-button type="text" @click="statusClick(row)">状态变更</el-button>
          <el-button type="text" @click="detailClick(row)">店铺详情</el-button>
          <el-button type="text" @click="editClick(row)">商铺信息补充</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.currentPage"
      layout="total, sizes, prev, pager, next, jumper"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>

    <ShopEdit ref="CreateShopEdit" @onOk="fetchData"></ShopEdit>
    <ShopDetail ref="CreateShopDetail" @onOk="fetchData"></ShopDetail>
    <ShopAudit ref="CreateShopAudit" @onOk="fetchData"></ShopAudit>

  </div>
</template>

<script>
import {
  Vue,
  ref,
  toRefs,
  shallowRef,
  reactive,
  watch,
  watchEffect,
  getCurrentInstance,
  computed,
  defineComponent,
  nextTick,
  inject,
  onMounted,
  onUnmounted,
} from 'vue'
import { Message } from 'element-ui'
import store from '@/store'
import ShopEdit from '@/components/VabMerchant/shopEdit'
import ShopDetail from '@/components/VabMerchant/shopDetail'
import ShopAudit from '@/components/VabMerchant/shopAudit'
import {
  getMerchantGoodsPage
} from '@/api/merchant/goods_api.js'
export default {
  name: 'shopList',
  components: {
    ShopEdit,
    ShopDetail,
    ShopAudit
  },
  setup(props, { emit }) {
    const Interface = reactive({
      handleSizeChange(val) {
        query.queryForm.pageSize = val
        Interface.fetchData()
      },
      handleCurrentChange(val) {
        query.queryForm.currentPage = val
        Interface.fetchData()
      },
      async fetchData(){
        const {data} = await getMerchantGoodsPage(query.queryForm)
        if(data && Array.isArray(data.shops)){
          query.list = data.shops
          query.total = data.total
        }
      },
      initList(){
        if(query.userinfo.ruleId){
          query.queryForm.schoolId = query.userinfo.schoolId
        }else{
          query.queryForm.schoolId = query.userinfo.schoolId
        }
        Interface.fetchData()
      },
      formatstatus(row, column){
        const statusMap = {
          1: '待审核',
          2: '审核通过',
          3: '审核未通过',
          4: '下架'
        }
        return statusMap[row.status]
      },
      formatIsOpen(row, column){
        const typeMap = {
          1: '是',
          2: '否'
        }
        return typeMap[row.type]
      },
      formatTime(row, column){
        let data = row[column.property]
        let dtime = new Date(data)
        const year = dtime.getFullYear()
        let month = dtime.getMonth() + 1
        if (month < 10) {
          month = '0' + month
        }
        let day = dtime.getDate()
        if (day < 10) {
          day = '0' + day
        }
        return year+ '-' + month+ '-' + day
      },
      statusClick(row){
        CreateShopAudit.value.open(row)
      },
      detailClick(row){
        CreateShopDetail.value.open(row)
      },
      editClick(row){
        CreateShopAudit.value.open(row)
      }
    })
    const query = reactive({
      shopStatusData: computed(() => store.getters['baseStore/shopStatusData']),
      schoolData:computed(() => store.getters['baseStore/schoolData']),
      userinfo:computed(() => store.getters['baseStore/userInfo']),
      list:[],
      total:0,
      queryForm: {
        pageSize:10,
        currentPage:1,
        name:'',
        shopId:'',
        schoolId:''
      }
    })
    const CreateShopEdit = ref(null)
    const CreateShopDetail = ref(null)
    const CreateShopAudit = ref(null)
    onMounted(() => {
      Interface.initList()
    })
    return {
      CreateShopEdit,
      CreateShopDetail,
      CreateShopAudit,
      ...toRefs(query),
      ...toRefs(Interface)
    }
  }
} 
</script> 
 